<div *ngIf="hero" class="form-horizontal">
    <h2>{{hero.name}} details!</h2>
    <div class="form-group">
        <div *ngIf="!newHero">
            <label class="col-sm-2 control-label">id: </label>
            <div class="col-sm-10">
                {{hero._id}}
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Name: </label>
        <div class="col-sm-10">
            <input class="form-control" [(ngModel)]="hero.name" placeholder="name" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Power: </label>
        <div class="col-sm-10">
            <input class="form-control" [(ngModel)]="hero.power" placeholder="power" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">Amount People Saved: </label>
        <div class="col-sm-10">
            <input class="form-control" [(ngModel)]="hero.amountPeopleSaved" placeholder="amountPeopleSaved" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button (click)="goBack()" class="btn btn-default">Back</button>
            <button (click)="save()" class="btn btn-primary">Save</button>
        </div>
    </div>
</div>